import React, { Component } from 'react';
import './yangshi/pay.scss';
class Com extends Component {
    render () {
        return (
            <div className="container">
                <div className='box'>
                    <div className="content">
                        {/* 订单待付款头部 */}
                        <div className="seller-shipped">
                            <div className="top">
                                <span className="order-icon iconfont icondaifukuan"></span>
                                <span>订单待付款</span>
                            </div>
                        </div>
                        {/* 订单时间限制 */}
                        <div className="order-prompt">请在尽快完成付款，还剩
                            <span>59分</span>（超时按
                            <span>取消订单</span>处理）
                        </div>
                        {/* 收货地址 */}
                        <div className="buyer-information self-delivery-info">
                            <span className="icon-goods-location iconfont icondizhi"></span>
                            <div className="buyer-box">
                                <div className="buyer-name-box">
                                    <span className="cash-delivery shipping-type">快递</span>
                                    <span className="buyer-name">请问</span>
                                    <span>12341231234</span>
                                </div>
                                <div className="buyer-address">广东省深圳市南山区粤海街道深南大道深南花园</div>
                            </div>
                        </div>
                        {/* 联系客服 */}
                        <div className="app-box">
                            <div>
                                <img className="app-logo" src="https://img.zhichiwangluo.com/zcimgdir/thumb/t_15391569805bbdabf441e42.jpg" />
                                <span className="app-name">大大优鲜</span>
                                <div className="contact-service pull-right">
                                    <span>联系客服</span>
                                    <span className="iconfont iconxinxi icon-goods-customer-service"></span>
                                    <button></button>
                                </div>
                            </div>
                        </div>
                        {/* 产品信息 */}
                        <div className="goods-detail-box">
                            <img src="https://img.zhichiwangluo.com/5e09cfd644f4etmp_1c7ff8e2931a66597e511129f76360a68e274c27a3948f82.jpg" />
                            <div>
                                <div className="goods-name">西洋参尾端切片</div>
                                <div className="goods-price">
                                    <span className="colorff7">¥15.00</span>
                                    <span className="pull-right">x 1</span>
                                </div>
                            </div>
                        </div>
                        {/* 产品全额 */}
                        <div className="goods-amount">
                            <span>商品金额</span>
                            <span className="pull-right color999">¥15.00</span>
                        </div>
                        {/* 优惠方式 */}
                        <div className="promotion-method">
                            <div>
                                <span>优惠方式</span>
                                <span className="pull-right promotion-method-title color999">无</span>
                            </div>
                            <div className="pull-right color999">- ¥0.00</div>
                        </div>
                        {/* 运费 */}
                        <div className="goods-amount">
                            <span>运费</span>
                            <span className="pull-right color999">¥6.00</span>
                        </div>
                        {/* 订单总价 */}
                        <div className="goods-amount">
                            <span>订单总价</span>
                            <span className="pull-right color999">¥21.00</span>
                        </div>
                        {/* 实际付款 */}
                        <div className="actual-payment">
                            <div>
                                <span>实际付款</span>
                                <span className="pull-right colorff7">¥21.00</span>
                            </div>
                        </div>
                        {/* 订单进度 */}
                        <div className="addition-info no-border">
                            <div>
                                <span>订单进度</span>
                                <span className="pull-right colord2d2 iconfont iconyoujiantou"></span>
                            </div>
                        </div>
                        {/* 订单编号 */}
                        <div className="order-number">
                            <div>
                                <span>订单编号</span>
                                <span className="biaohao">5e13dc6131dd2279906576</span>
                                <span className="pull-right">复制</span>
                            </div>
                            <div>
                                <span>下单时间</span>
                                <span className="biaohao">2020-01-07 09:18:25</span>
                            </div>
                        </div>
                    </div>
                </div>
                <footer className="foot-pay">
                    <span className="apply-refund" data-type="cancelOrder">取消订单</span>
                    <span className="btn btn-orange orderDetail-pay-directly">立即支付</span>
                </footer>
            </div>
        )
    }
}
export default Com